import React, {useState} from 'react';
import {LocalizationProvider} from "@mui/x-date-pickers";
import {AdapterLuxon} from "@mui/x-date-pickers/AdapterLuxon";
import {DatePicker} from "@mui/x-date-pickers/DatePicker";
import {DateTime} from 'luxon';
// 动态导入
// const DatePicker = dynamic(
//   () => import('@mui/x-date-pickers').then((mod) => mod.DatePicker),
//   { ssr: false }
// );
export const TestDatePicker = () => {
    const [value, setValue] = useState<DateTime | null>(() => {
        const date = new Date();
        date.setDate(date.getDate() + 36);
        return DateTime.fromJSDate(date);
    });

    const handleChange = (newValue: DateTime | null) => {
        setValue(newValue);
    };

    return (
        <div className="m-6">
            <LocalizationProvider dateAdapter={AdapterLuxon}>
                <DatePicker
                    value={value}
                    onChange={handleChange}
                    format="yyyy-MM"
                    views={['year', 'month']}
                />
            </LocalizationProvider>
        </div>
    );
};
